<div>
  <%= simple_form_for(@topic, url: admin_topics_path, remote: true, validate: true, multipart: true, authenticity_token: true, html: { class: 'form-vertical new-ticket-loader', method: 'post', data: { persist: 'garlic'} }) do |f| -%>
  <%= content_tag :h3, class: 'view-header'  do %>
    <%= "#{t(:open_new_discussion, default: 'New Ticket')}" %>
    <small id="has-storage"></small>
  <% end %>

  <div class="row">
    <div class="col-md-8">

      <%= f.input :kind, collection: ticket_types_collection, class: 'disable-empty', autofocus: true, include_blank: false -%>
      <%= f.input :name, :size => 40, class: 'disable-empty', autofocus: true, validate: false -%>

      <%= f.simple_fields_for @user, validate: true do |u| %>
        <%= u.input :name, class: 'disable-empty' %>
        <%= u.input :home_phone, class: 'disable-empty' %>
        <%= content_tag(:div, '', class: 'fas fa-angle-down pull-right cc-bcc-toggle', role: 'button') %>

        <%= u.input :email, class: 'disable-empty', label: "#{t('activerecord.attributes.user.email')} (#{link_to 'generate temporary', '#', class: 'generate-temp'})".html_safe %>
      <% end %>
    <%= f.simple_fields_for @topic.posts.new, validate: true do |i| %>
      <%#= i.input :body, input_html: { rows: 8, cols: 60, class: 'disable-empty form-control' }, label: false, validate: { presence: true } -%>
      <%= i.input :kind, as: :hidden, input_html: { value: 'first' } %>
      <span class="cc-bcc hidden">
      <%= i.input :cc, label: false, placeholder: 'cc:' %>
      <%= i.input :bcc, label: false, placeholder: 'bcc:' %>
      </span>
      <%= i.input :body, as: :summernote, label: false, class: 'disable-empty' %>
      <%= render partial: "admin/shared/assistant" %>
      <%= label_tag 'post_reply_id', "#{t(:select_common, default: 'Insert Common Reply')} (#{link_to(t(:edit, default: 'Edit'), admin_category_path(1), target: 'blank')})".html_safe, class: 'control-label' %>
      <%= f.select_tag 'post[reply_id]', grouped_options_for_select(i18n_reply_grouped_options, nil, prompt: ''), class: 'form-control', id: 'post_reply_id' %>
      <br/>
      <% if !cloudinary_enabled? %>
        <%= i.file_field :attachments, multiple: true %>
        <ul class="list-inline" id="attachments">
        </ul>
      <% end %>
      <%= hidden_field_tag :client_id %>
      <div class="add-screenshots">
        <%= attachinary_file_field_tag 'topic[screenshots]', @topic, :screenshots if cloudinary_enabled? %>
      </div>
    <% end %>
    <br/>
      <%= f.button :submit, t(:submit_start_discussion, default: 'Create Ticket'), class: 'btn btn-warning disableable submit-ticket' %>
      <%= f.button :submit, t(:submit_start_note, default: 'Create Note'), class: 'btn btn-default disableable submit-note' %>
    </div>
    <div class="col-md-4">
      <%= f.input :channel, collection: channels_collection, as: :select, include_blank: false, item_wrapper_class: 'channel-item', item_wrapper_tag: :div, class: 'channel-toggle' %>
      <% if teams = admin_teams %>
        <%= f.input(:team_list, collection: teams, :label => t(:assign_to), locale: I18n.locale, prompt: "", style: "display:none;") if teams? and teams.count > 0 %>
      <% end %>
      <%= f.input :priority, collection: ticket_priority_collection , as: :select, include_blank: true, selected: 'normal' %>
      <%= f.input :current_status, collection: statuses_collection, as: :select, include_blank: false, selected: 'new' %>
      <%= f.input :assigned_user_id, collection: agents_for_select, as: :select, include_blank: true, selected: current_user.id %>
      <%= f.input :tag_list, collection: ticket_tag_collection, as: :select, include_blank: false,
        input_html: { multiple: true, class: 'selectpicker', data: { 'none-selected-text': 'Any'} } unless ticket_tag_collection.blank? %>
    </div>
  </div>
  <% end -%>
</div>
<%= summernote_lang_js %>
<script>
$('[data-provider="summernote"]').each(function(){
  $(this).summernote({
    lang: '<%= summernote_locale %>',
    height: 150,
    prettifyHtml: true,
    toolbar: [
      ['style', ['bold', 'italic', 'underline', 'clear']]
    ],
    codemirror: {
      theme: 'monokai',
      mode: "htmlmixed",
      tabsize: 2,
      smartIndent: true,
      lineNumbers: true,
      lineWrapping: true,
      tabMode: 'indent'
    },
    hint: {
      match: /:([\-+\w]+)$/,
      search: function (keyword, callback) {
        callback($.grep(emojis, function (item) {
          return item.indexOf(keyword)  === 0;
        }));
      },
      template: function (item) {
        var content = emojiUrls[item];
        return '<img src="' + content + '" width="20" /> :' + item + ':';
      },
      content: function (item) {
        var url = emojiUrls[item];
        if (url) {
          return $('<img />').attr('src', url).css('width', 20)[0];
        }
        return '';
      }
    },
    callbacks: {
    <% unless params[:user_id].present? %>
      onInit: function (e) {
        $("#topic_post_body").summernote("code", localStorage.getItem("new_ticket_draft"));
      }
    <% end %>
    }
  });
});
$.ajax({
  url: 'https://api.github.com/emojis',
  async: false
}).then(function(data) {
  window.emojis = Object.keys(data);
  window.emojiUrls = data;
});
</script>
<script>
  $('.submit-note').off('click').on('click', function(){
    $('#topic_post_kind').val('note');
  });
  $('.submit-ticket').off('click').on('click', function(){
    $('#topic_post_kind').val('first');
  });
  <% unless params[:user_id].present? %>
    $("#new_topic").sisyphus();

    // Add clear saved draft option
    if (localStorage.getItem("[id=new_topic][name=undefined][id=topic_current_status][name=topic[current_status]]") !== null) {
      $('#has-storage').html('<input type="reset" name="commit" value="Clear autosaved draft" data-validate="false" class="btn btn-default clear-draft" style="margin-top: -10px; margin-left: 10px;">');
    }
    $('.clear-draft').on("click", function () {
      localStorage.removeItem("new_ticket_draft");
      $('[data-provider="summernote"]').summernote('code', '');
      $('#has-storage').fadeOut();
    });  
  <% end %>
  $(document).off('keyup').on('keyup', '.note-editable', function () {
    localStorage.setItem("new_ticket_draft", $("#topic_post_body").summernote("code"));
  });
  $('#new_topic').on('submit', function () {
    localStorage.removeItem("new_ticket_draft");
  });


</script>
